<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" contentType="text/html;charset=utf-8" %>
<html>
<head>
    <title>Home</title>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>

    <script language="JavaScript">
        function submitOnclick() {
            var txtOrigin = $('#originUrl');
            var originUrl = txtOrigin.val();
            var txtResult = $('#resultUrl');
            var txtSignKey = $('#signKey');
            var signKey = txtSignKey.val();

            var divLoader = $('#loader');
            divLoader.show();

            $.post("sign/signurl", {
                originUrl: originUrl,
                signKey: signKey
            }, function (data, status) {
                var txtResult = $('#resultUrl');
                txtResult.val(data.data.signUrl);
                var pTimeStamp = $('#timeStamp');
                pTimeStamp.text(data.data.timeStamp);
                var lHttpStatusCode = $('#httpStatusCode');
                lHttpStatusCode.text(data.data.httpStatusCode);
                var lBody = $('#body');
                lBody.text(data.data.body);
                divLoader.hide();
            });
        }
    </script>
    <style type="text/css">
        .loader{
            text-align: center;
            margin-top: 50px;
        }
        .loading {
            position: relative;
            display: inline-block;
        }
        .loading .dot {
            position: absolute;
            opacity: 0;
            width: 64px;
            height: 64px;
            -webkit-transform: rotate(225deg);
            -moz-transform: rotate(225deg);
            -o-transform: rotate(225deg);
            -ms-transform: rotate(225deg);
            transform: rotate(225deg);
            -webkit-animation-name: loading;
            -moz-animation-name: loading;
            -ms-animation-name: loading;
            -o-animation-name: loading;
            animation-name: loading;
            -webkit-animation-iteration-count: infinite;
            -moz-animation-iteration-count: infinite;
            -ms-animation-iteration-count: infinite;
            -o-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            -o-animation-duration: 5.28s;
            -moz-animation-duration: 5.28s;
            -webkit-animation-duration: 5.28s;
            animation-duration: 5.28s;
        }
        .loading .dot:after {
            content: "";
            position: absolute;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #000;
        }
        .loading .dot:nth-child(2) {
            -webkit-animation-delay: .23s;
            -moz-animation-delay: .23s;
            -ms-animation-delay: .23s;
            -o-animation-delay: .23s;
            animation-delay: .23s;
        }
        .loading .dot:nth-child(3) {
            -webkit-animation-delay: .46s;
            -moz-animation-delay: .46s;
            -ms-animation-delay: .46s;
            -o-animation-delay: .46s;
            animation-delay: .46s;
        }
        .loading .dot:nth-child(4) {
            -webkit-animation-delay: .69s;
            -moz-animation-delay: .69s;
            -ms-animation-delay: .69s;
            -o-animation-delay: .69s;
            animation-delay: .69s;
        }
        .loading .dot:nth-child(5) {
            -webkit-animation-delay: .92s;
            -moz-animation-delay: .92s;
            -ms-animation-delay: .92s;
            -o-animation-delay: .92s;
            animation-delay: .92s;
        }
        @-webkit-keyframes loading {
            0% {
                -webkit-transform: rotate(225deg);
                opacity: 1;
                -webkit-animation-timing-function: ease-out;
            }
            8% {
                -webkit-transform: rotate(345deg);
                -webkit-animation-timing-function: linear;
            }
            30% {
                -webkit-transform: rotate(455deg);
                -webkit-animation-timing-function: ease-in-out;
            }
            40% {
                -webkit-transform: rotate(690deg);
                -webkit-animation-timing-function: linear;
            }
            60% {
                -webkit-transform: rotate(815deg);
                opacity: 1;
                -webkit-animation-timing-function: ease-out;
            }
            75% {
                -webkit-transform: rotate(965deg);
                -webkit-animation-timing-function: ease-out;
            }
            76% {
                opacity: 0;
            }
            100% {
                opacity: 0;
            }
        }

        @-moz-keyframes loading {
            0% {
                -moz-transform: rotate(225deg);
                opacity: 1;
                -moz-animation-timing-function: ease-out;
            }
            8% {
                -moz-transform: rotate(345deg);
                -moz-animation-timing-function: linear;
            }
            30% {
                -moz-transform: rotate(455deg);
                -moz-animation-timing-function: ease-in-out;
            }
            40% {
                -moz-transform: rotate(690deg);
                -moz-animation-timing-function: linear;
            }
            60% {
                -moz-transform: rotate(815deg);
                opacity: 1;
                -moz-animation-timing-function: ease-out;
            }
            75% {
                -moz-transform: rotate(965deg);
                -moz-animation-timing-function: ease-out;
            }
            76% {
                opacity: 0;
            }
            100% {
                opacity: 0;
            }
        }

        @keyframes loading {
            0% {
                transform: rotate(225deg);
                opacity: 1;
                animation-timing-function: ease-out;
            }
            8% {
                transform: rotate(345deg);
                animation-timing-function: linear;
            }
            30% {
                transform: rotate(455deg);
                animation-timing-function: ease-in-out;
            }
            40% {
                transform: rotate(690deg);
                animation-timing-function: linear;
            }
            60% {
                transform: rotate(815deg);
                opacity: 1;
                animation-timing-function: ease-out;
            }
            75% {
                transform: rotate(965deg);
                animation-timing-function: ease-out;
            }
            76% {
                opacity: 0;
            }
            100% {
                opacity: 0;
            }
        }
    </style>
</head>
<body>
<P>The time on the server is ${serverTime}.</P>

    <p>the timestamp is
    <lable id="timeStamp"></lable>
    </p>
<table>

    <tbody>

    <tr>
        <td>SignKey：</td>
        <td><input type="text" id="signKey" style="width: 150px"/></td>
    </tr>

    <tr>
        <td>Url：</td>
        <td><textarea data-required="true" id="originUrl"
                      name="originUrl" rows="10" cols="80"></textarea></td>
    </tr>

    <tr>
        <td>Result：</td>
        <td><textarea data-required="true" id="resultUrl"
                      name="resultUrl" rows="10" cols="80"></textarea></td>
    </tr>

    <tr>
        <td><input type="button" id="subButton" value="submit"
                   onclick="submitOnclick();"/></td>
        <td><input type="button" id="resetButton" value="reset"/></td>
    </tr>
    <tbody>
</table>

<p>
    HttpStatusCode:<label id="httpStatusCode"></label>
</p>

<p>
    Respone body:<label id="body"></label>
</p>

<div class="loader" id="loader" style="display: none">
    <div class="loading">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
    </div>
</div>
</body>
</html>
